<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>css-苹果</title>
</head>
<style>
	* {
		margin: 0;
		padding: 0;
	}

	html {
		height: 100%;
	}

	body {
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		background: radial-gradient(rgb(241, 209, 172), rgb(189, 125, 96)) -20px -20px;
	}

	.apple {
		position: relative;
		width: 300px;
		height: 270px;
		background: radial-gradient(#0000, rgba(0, 0, 0, .1)),
			radial-gradient(rgba(239, 156, 109, .2), #0000);
		background-color: #bf2934;
		border-radius: 160px 150px 145px 150px/160px 140px 210px 190px;
		box-shadow: inset 30px -20px 30px 20px rgba(0, 0, 0, .15),
			inset 10px -10px 15px 0 rgba(0, 0, 0, .15),
			inset 10px 10px 5px 0 rgba(255, 255, 255, .05),
			inset -10px 10px 30px 10px rgba(237, 115, 84, .3);
	}

	.apple::before {
		position: absolute;
		left: 135px;
		top: 50px;
		content: '';
		width: 80px;
		height: 30px;
		transform: skew(-20deg) rotate(10deg);
		border-radius: 45%;
		background: rgba(255, 255, 255, .65);
		box-shadow: 2px 10px 30px 22px rgba(239, 156, 109, 1);
		filter: blur(5px);
	}

	.apple::after {
		position: absolute;
		left: 90px;
		top: 2px;
		width: 120px;
		background: radial-gradient(rgba(0, 0, 0, .3), rgba(239, 156, 109, .2));
		height: 30px;
		content: '';
		border-radius: 50%;
		filter: blur(2px);
		clip-path: polygon(50% 55%, 150% 0, -50% 0);
		filter: blur(1px);
	}

	.stripe {
		position: absolute;
		width: 300px;
		height: 270px;
		border-radius: 160px 150px 145px 150px/160px 140px 210px 190px;
		border-right: solid 2px rgba(239, 156, 109, .2);
		transform: scaleX(.9);
		filter: blur(4px);
	}

	.spot {
		position: absolute;
		width: 4px;
		height: 4px;
		border-radius: 50%;
		background: rgba(239, 156, 109, .6);
		filter: blur(1px);
	}

	.shadow {
		position: absolute;
		width: 300px;
		height: 270px;
		background-color: rgba(0, 0, 0, .15);
		transform-origin: 50% 100%;
		transform: translate(5px, 5px) skew(60deg) scaleY(.25);
		border-radius: 160px 150px 145px 150px/160px 140px 210px 190px;
		box-shadow: 0 0 20px rgba(0, 0, 0, .15);
		filter: blur(4px);
	}

	.petiole {
		position: absolute;
		transform: translate(155px, -48px) rotate(35deg);
		width: 20px;
		height: 60px;
		border-top: solid 15px transparent;
		border-left: solid 10px rgb(162, 76, 9);
		border-bottom: solid 8px transparent;
		border-radius: 50%;
	}

	.petiole.left {
		transform: translate(154px, -49px) rotate(35deg);
		border-left-color: rgb(123, 48, 24);
	}
</style>

<body>
	<div class="shadow"></div>
	<div class="apple">
		<div class="petiole left"></div>
		<div class="petiole"></div>
	</div>
	<script>
		function addStripe() {
			var fragment = document.createDocumentFragment()
			var count = 15
			for (var i = -count; i < count; i++) {
				var stripe = document.createElement('div')
				stripe.className = 'stripe'
				stripe.style.opacity = Math.max(1, 0.5 + Math.random())
				stripe.style.transform = `scaleX(${(i / count + Math.random() * 0.2).toFixed(2)})`
				fragment.appendChild(stripe)
			}
			document.querySelector('.apple').appendChild(fragment)
		}

		function addSpot() {
			var count = 60
			var fragment = document.createDocumentFragment()
			for (var i = 0; i < count; i++) {
				var spot = document.createElement('div')
				spot.className = 'spot'
				spot.style.left = 5 + ~~(Math.random() * 90) + '%'
				spot.style.top = 5 + ~~(Math.random() * 90) + '%'
				spot.style.opacity = 0.2 + Math.random() * 0.4
				spot.style.transform = `scaleX(${Math.random() * 0.8 + 0.2}) scaleY(${Math.random() * 0.8 + 0.2}) rotate(${~~(360 * Math.random())}deg)`
				fragment.appendChild(spot)
			}
			document.querySelector('.apple').appendChild(fragment)
		}
		window.onload = function () {
			addStripe()
			addSpot()
		}
	</script>
</body>

</html>
